Component({
  externalClasses: ['t-class'],
  options: {
    multipleSlots: true
  },
  properties: {
    closable: {
      type: Boolean,
      value: false
    },
    icon: {
      type: String,
      value: ''
    },
    loop: {
      type: Boolean,
      value: false
    },
    // 背景颜色
    backgroundcolor: {
      type: String,
      value: '#fefcec'
    },
    // 字体及图标颜色
    color: {
      type: String,
      value: '#f76a24'
    },
    // 滚动速度
    speed: {
      type: Number,
      value: 1000
    },
    visible: {
      type: Boolean,
      value: true
    }
  },

  data: {
    show: true,
    wrapWidth: 0,
    width: 0,
    duration: 0,
    animation: null,
    timer: null,
  },
  observers: {
    'visible': function (newVal, oldVal) {
      this.setData({
        show: newVal
      })
    }
  },
  detached() {
    this.destroyTimer();
  },
  ready() {
    this.setData({
      show: this.properties.visible
    })
    if (this.data.loop) {
      this.initAnimation();
    }
  },
  methods: {
    initAnimation() {
      wx.createSelectorQuery().in(this).select('.i-noticebar-content-wrap').boundingClientRect((wrapRect) => {
        wx.createSelectorQuery().in(this).select('.i-noticebar-content').boundingClientRect((rect) => {
          const duration = rect.width / 40 * this.data.speed;
          const animation = wx.createAnimation({
            duration: duration,
            timingFunction: "linear",
          });
          this.setData({
            wrapWidth: wrapRect.width,
            width: rect.width,
            duration: duration,
            animation: animation
          }, () => {
            this.startAnimation();
          });
        }).exec();

      }).exec();
    },
    startAnimation() {
      //reset
      if (this.data.animation.option.transition.duration !== 0) {
        this.data.animation.option.transition.duration = 0;
        const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step();
        this.setData({
          animationData: resetAnimation.export()
        });
      }
      this.data.animation.option.transition.duration = this.data.duration;
      const animationData = this.data.animation.translateX(-this.data.width).step();
      setTimeout(() => {
        this.setData({
          animationData: animationData.export()
        });
      }, 100);
      const timer = setTimeout(() => {
        this.startAnimation()
      }, this.data.duration)
      this.setData({
        timer
      })
    },
    destroyTimer() {
      if (this.data.timer) {
        clearTimeout(this.data.timer)
      }
    },
    handleClose() {
      this.destroyTimer();
      this.setData({
        show: false,
        timer: null
      })
      this.triggerEvent('close')
    }
  }
})